<!--
@fucntion: 学院信息
-->
<template>
  <div class="module-basic-faculty">
    <el-row style="height:100%;">
      <el-col style="height:100%;">
        <table-panel 
        :name="'学院信息'" 
        :columns="facultyColumns" 
        :tableData="facultyData" 
        :showRowNumber="true" 
        :multiSelection="true"
        :canCreate="authorities.create" 
        :canEdit="authorities.edit" 
        :canDelete="authorities.delete"
        :canExport="false" 
        :usePagination="false"
        :inputLabelSearchMode="true"
        :currentPage="facultyCurrentPage" 
        :totalNum="facultyTotalNum" 
        @page-change="onPageChange('faculty', $event)" :pageSize="pageSize"
        @table-searching="onSearching('faculty', $event)"
        @table-create="onCreate('faculty', $event)" 
        @table-edit="onEdit('faculty', $event)"
        @table-delete="onDelete('faculty',$event)" 
        @table-export="onExport('faculty',$event)"
        @selection-change="onSelectionChange('faculty',$event)"></table-panel>
      </el-col>
    </el-row>
    <el-dialog title="学院信息" width="20%" :visible.sync="facultyDlgVisible">
      <el-form ref="facultyForm" :model="facultyRecord" :rules="facultyRules"
      label-position="right" label-width="90px" size="mini" status-icon>
        <el-form-item label="学院编号" prop="xybhzdy">
          <el-input v-model="facultyRecord.xybhzdy"></el-input>
        </el-form-item>
        <el-form-item label="学院名称" prop="xymc">
          <el-input v-model="facultyRecord.xymc"></el-input>
        </el-form-item>
        <el-form-item label="学院电话" prop="xydh">
          <el-input v-model="facultyRecord.xydh"></el-input>
        </el-form-item>
        <el-form-item label="学院备注" prop="xybz">
          <el-input type="textarea" v-model="facultyRecord.xybz"></el-input>
        </el-form-item>
        <el-checkbox v-model="facultyRecord.sfqy" label="是否启用" true-label="1" false-label="0">
        </el-checkbox>
        <el-row>
          <el-button @click="onConfirm('faculty', $event)" type="primary" size="mini">确定</el-button>
          <el-button @click="facultyDlgVisible=false" size="mini">取消</el-button>
        </el-row>
      </el-form>
    </el-dialog> 
  </div>
</template>
<script>
import TablePanel from "@/components/basic/TablePanel";
import {
  formModelInitFromTable,
  formRulesInitFromTable
} from "@/utils/formutils.js";
import { trueFalseRenderer } from "@/utils/tableutils.js";

//meta info 元信息
var faculty = "faculty"; // 表格名称
var columnsAttr = "Columns"; // 列
var dataAttr = "Data"; // 数据
var selectionAttr = "Selection"; // 选中
var dlgVisibleAttr = "DlgVisible"; // 对话框
var formAttr = "Form";
var recordAttr = "Record"; // 表单模型
var rulesAttr = "Rules"; // 表单验证
var curPageAttr = "CurrentPage";// 分页-当前页
var totalNumAttr = "TotalNum";// 分页-总数
var qParamAttr = "QueryParams";// 查询参数

// 学院信息-列
var facultyColumns = [
  {
    prop: "xybh",
    label: "学院编号",
    outOfSearch:true,
    hidden: true
  },
  {
    prop: "xybhzdy",
    label: "学院编号",
    rules:[{
      required: true,
      max: 10, 
      message: "不超过10个字符",
      trigger: "blur"
    }]
  },
  {
    prop: "xymc",
    label: "学院名称",
    rules:[{
      required: true,
      max: 50, 
      message: "不超过50个字符",
      trigger: "blur"
    }]
  },
  {
    prop: "xydh",
    label: "学院电话",
    rules:[{
      required: true,
      message: "请输入有效的电话号码",
      pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
      trigger: "blur"
    }]
  },
  {
    prop: "xybz",
    label: "学院备注",
    rules:[{ 
      max: 50, 
      message: "不超过20个字符", 
      trigger: 'blur' 
    }]
  },
  {
    prop: "sfqy",
    label: "是否启用",
    type: "boolean",
    width: 80,
    outOfSearch: true,
    align: "center",
    headerAlign: "center",
    renderer: trueFalseRenderer
  }
];

export default {
  name: "Faculty",
  components: {
    "table-panel": TablePanel
  },
  methods: {
    onSearching: function(tname, params) {//查询
      var me = this;
      let url = "/jcXyxxb";// /static/data/faculty.json

      if(url !== "") {
        me[tname+qParamAttr] = {};
        me[tname+qParamAttr] = params;
        console.log("params.isAccurate=",params.isAccurate);
        if (params.isAccurate) {
          me[tname+qParamAttr] = params.paramPairs;
        } else {
          me[tname+qParamAttr].keywords = params.query;
        }
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data;
              // me[tname+totalNumAttr] = resp.data.total;
            }
        });
      }
    },
    onCreate: function(tname) {//新增
      var me = this;
      me[tname+recordAttr] = formModelInitFromTable(me[tname+columnsAttr]);
      me[tname+recordAttr].sfqy = "1";// 创建时，有效否是选中的
      me[tname+dlgVisibleAttr] = true;
    },
    onEdit: function(tname, row) {//编辑
      var me = this;
      me[tname + recordAttr]= row;
      me[tname + dlgVisibleAttr] = true;
    },
    onDelete: function(tname, row) {//删除
      var me = this;
      me.$confirm("确定删除这条记录吗?", "提示", {
        type: "warning"
      }).then(() => {
        me.deleteRequest(`/jcXyxxb/${row.xybh}`).then((resp)=>{
          if(resp.status == 200) {
            me.$message.success("删除成功!");
            me.onSearching(faculty,{});// 重新加载表格数据
          }else{
            me.$message.error("删除失败！");
          }
        });
      }).catch(() => {});
    },
    onExport: function(tname, params) {//导出
      var me = this;
      me.$message({
        type: "info",
        message: "发送导出请求，返回下载路径"
      });
    },
    onSelectionChange: function(tname, data) {//选择改变
      // 选中改变
       var me = this;
      // 缓存记录，按照角色编号，查询对应的选中权限节点数组
      me[tname+selectionAttr] = data;
    },
    onConfirm: function(tname) {//确定
      var me = this;
      // 验证信息
      var ret;
      me.$refs[tname + formAttr].validate((result, what)=>{
        ret = result;
      });
      if(!ret){
        me.$message.error("表单信息有误");
        return;
      }
      // 发送请求 /static/data/testSuc.json
      me.postRequest("/jcXyxxb",me[tname+recordAttr]).then((resp)=>{
        if (resp.status == 200) {
          me.$message.success("提交成功！");
          //最后，隐藏对话框
          me[tname + dlgVisibleAttr] = false;
          me.onSearching(faculty, {});// 重新查一遍
        } else {
          me.$message.error("服务器发生错误，代码：" + resp.status);
        }
      });
    },
    onPageChange:function(tname,page){// 分页改变
      var me = this;
      let url = "/static/data/faculty.json";

      if(url !== ""){
        me[tname+curPageAttr] = page;
        me[tname+qParamAttr]["page"] = page;
        me.getRequest(url, me[tname+qParamAttr]).then(resp => {
            if(resp.status == 200) {
              me[tname+dataAttr] = resp.data.results;
              me[tname+totalNumAttr] = resp.data.total;
            }
        });
      }

    }
  },
  data() {
    return {
      authorities:{
        create:true,
        delete:true,
        edit:true,
        search:true
      },// 权限控制
      [faculty + columnsAttr]: facultyColumns, // 表格-列
      [faculty + dataAttr]: [], // 表格的数据
      [faculty + selectionAttr]: [], // 当前选中
      [faculty + dlgVisibleAttr]: false, // 对话框是否可见
      [faculty + recordAttr]: {}, // 表单模型
      [faculty + rulesAttr]: {}, // 表单验证
      [faculty + curPageAttr]:1,// 当前页
      [faculty + totalNumAttr]:0,// 总数
      [faculty + qParamAttr]:{},// 查询参数
      pageSize:20// 每页数量
    };
  },
  created: function() {
    let me = this;
    // 添加权限控制
    // me.authorities = me.$route.meta.authorities;

    // 表单模型初始化
    me[faculty+recordAttr] = formModelInitFromTable(me[faculty+columnsAttr]);
    // 表单验证初始化
    me[faculty+rulesAttr] = formRulesInitFromTable(me[faculty+columnsAttr]);
  }
};
</script>
<style lang="scss">
.module-basic-faculty {
  height: 100%;
}
</style>


